<template>
  <div>
    <div>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>照料服务</el-breadcrumb-item>
        <el-breadcrumb-item>服务项目</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 护理项目类型区域-->
    <div class="left">
      <el-table
          :border="false"
          :data="caretypeList"
          style="width: 100%;font-size: small"
          @row-click="selectCaretype"
          highlight-current-row
          :row-class-name="tableRowClassName">
        <el-table-column prop="typename" label="护理项目类别" ></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                size="mini"
                type="warning"
                @click="modifyCaretype(scope.row)">修改
            </el-button>
            <el-button
                size="mini"
                type="warning"
                @click="removeCaretype(scope.row.id)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button
          style="margin: 10px 70px;text-align: center"
          size="small"
          type="primary"
          @click="openAddCaretype()">添加护理类别
      </el-button>
      <!-- 添加类别-->
      <div>
        <el-dialog title="添加项目类别" :visible.sync="addtypeDialogVisible" @close="closeAddTypeForm" :close-on-click-modal="false">
          <el-form ref="addTypeFormRef" :rules="addTypeRules" :model="aadTypeForm" label-width="150px" size="mini">
            <el-form-item label="类别名称" prop="typename">
              <el-input v-model="aadTypeForm.typename"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button  @click="closeAddTypeForm()">取 消</el-button>
            <el-button type="primary" @click="addType()">确 定</el-button>
          </div>
        </el-dialog>
      </div>

      <!-- 修改类别-->
      <div>
        <el-dialog title="修改项目类别" :visible.sync="editTypeDialogVisible" @close="closeeditTypeForm" :close-on-click-modal="false">
          <el-form ref="editTypeFormRef" :rules="editTypeRules" :model="editTypeForm" label-width="150px" size="mini">
            <el-form-item label="类别名称" prop="typename">
              <el-input v-model="editTypeForm.typename"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button  @click="closeeditTypeForm()">取 消</el-button>
            <el-button type="primary" @click="editType()">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>


    <!--项目明细区域-->
    <div class="right">
        <!--搜素-->
        <div>
          <el-row>
            <el-col :span="2">
              <el-button @click="openAddProjectDialog()" type="primary" size="small" style="float: left;font-size: 15px;background-color:darkcyan">
                创建服务项目
              </el-button>
            </el-col>
            <el-col :span="9" :offset="7">
              <el-input  placeholder="服务项目名称" clearable v-model="pname" @change="search" @clear="search">
                <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
              </el-input>
            </el-col>
            <el-col :span="0.5" :offset="1">
              <el-button type="primary" @click="searchAllProject" >查看全部项目</el-button>
            </el-col>
          </el-row>
        </div>
          <!-- 项目展示-->
       <el-table
          :data="CareProjectList"
          style="width: 100%"
          :row-class-name="tableRowClassName">
        <el-table-column prop="id" label="#" width="40px"></el-table-column>
        <el-table-column prop="pname" label="项目名称" width="90px"></el-table-column>
        <el-table-column prop="typename" label="所属类别" width="180px"></el-table-column>
        <el-table-column prop="description" label="简介"></el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                style="margin-left: 10px;margin-top: 5px"
                size="mini"
                type="primary"
                @click="openEditProject(scope.row)">修改
            </el-button>
            <el-button
                style="margin-top: 5px"
                size="mini"
                type="danger"
                @click="removeProject(scope.row.id)">删除
            </el-button>
          </template>
        </el-table-column>
       </el-table>

      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="pagelist"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      ></el-pagination>

      <!--添加项目 -->
      <div>
        <el-dialog title="添加服务项目" :visible.sync="addProjectDialogVisible" @close="closeAddProjectForm" :close-on-click-modal="false">
          <el-form ref="addProjectFormRef" :rules="addProjectRules" :model="aadProjectForm" label-width="150px" size="mini">
            <el-form-item label="所属类别" prop="caretypeId">
              <el-select v-model="aadProjectForm.caretypeId" placeholder="请选择所属类型">
                <el-option label="请选择" value=""></el-option>
                <el-option  :label="type.typename" :value="type.id" v-for="type in caretypeList" ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="项目名称" prop="pname">
              <el-input v-model="aadProjectForm.pname"></el-input>
            </el-form-item>
            <el-form-item label="项目简介" prop="description">
              <el-input v-model="aadProjectForm.description" type="textarea" placeholder="请输入项目简介"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button  @click="closeAddProjectForm()">取 消</el-button>
            <el-button type="primary" @click="addProject()">确 定</el-button>
          </div>
        </el-dialog>
      </div>

        <!-- 修改项目 -->
      <div>
        <el-dialog title="修改服务项目" :visible.sync="editProjectDialogVisible" @close="closeEditProjectForm" :close-on-click-modal="false">
          <el-form ref="editProjectFormRef" :rules="editProjectRules" :model="editProjectForm" label-width="150px" size="mini">
            <el-form-item label="所属类别" prop="caretypeId">
              <el-select v-model="editProjectForm.caretypeId" placeholder="请选择所属类型">
                <el-option label="请选择" value=""></el-option>
                <el-option  :label="type.typename" :value="type.id" v-for="type in caretypeList" ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="项目名称" prop="pname">
              <el-input v-model="editProjectForm.pname"></el-input>
            </el-form-item>
            <el-form-item label="项目简介" prop="description">
              <el-input v-model="editProjectForm.description" type="textarea" placeholder="请输入项目简介"></el-input>
            </el-form-item>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button  @click="closeEditProjectForm()">取 消</el-button>
            <el-button type="primary" @click="editProject()">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>


  </div>
</template>

<script>
export default {
  name: "careproject",
  data(){
    return{
      caretypeList:[],

      addtypeDialogVisible:false,
      aadTypeForm:{typename:''},
      addTypeRules:{
        typename:[{required: true, message: "不能为空", trigger: 'blur'}],
      },

      editTypeDialogVisible:false,
      editTypeForm:{typename:''},
      editTypeRules:{
        typename:[{required: true, message: "不能为空", trigger: 'blur'}],
      },


      CareProjectList:[],
      caretypeId:'',
      pname:'',
      pageNum: 1,
      pageSize: 6,
      pagelist: [2, 3, 6, 8],
      total: 0,

      addProjectDialogVisible:false,
      aadProjectForm:{},
      addProjectRules:{
        caretypeId:[{required: true, message: "不能为空", trigger: 'blur'}],
        pname:[{required: true, message: "不能为空", trigger: 'blur'}],
      },

      editProjectDialogVisible:false,
      editProjectForm:{},
      editProjectRules:{
        caretypeId:[{required: true, message: "不能为空", trigger: 'blur'}],
        pname:[{required: true, message: "不能为空", trigger: 'blur'}],
      },
    }
  },
  methods:{
    //鼠标选中行
    selectCaretype(row){
      this.caretypeId=row.id;
      this.initCareProjectList();
    },
    //类型修改--打开弹窗
    modifyCaretype(caretype){
      this.editTypeForm=caretype;
      this.editTypeDialogVisible=true;
    },
    closeeditTypeForm(){
      this.editTypeDialogVisible=false;
      this.$refs.editTypeFormRef.resetFields();
    },
    editType(){
      this.$refs.editTypeFormRef.validate((valid)=>{
        if(!valid){return;}
        this.$axios.post("/careType/modifytype",this.editTypeForm).then((res)=>{
          if(res.data.code==200){
            this.$message({
              type: "success",
              message: res.data.msg,
              duration: 1000
            })
            this.initCaretypeList();
            this.initCareProjectList();
          }else {
            this.$message({
              type: "error",
              message: res.data.msg,
              duration: 1000
            })
          }
          this.editTypeDialogVisible=false;
          this.$refs.editTypeFormRef.resetFields();
        });
      })
    },
    //类型删除
    removeCaretype(caretypeId){
      this.$confirm("你确定要删除吗？将终止此类型服务项目和相关护理级别", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let url = "/careType/removetype/" + caretypeId;
        this.$axios.get(url).then((res) => {
          if (res.data.code == 200) {
            this.$message({
              type: "success",
              message: res.data.msg,
              duration: 1000
            })
            this.initCaretypeList();
            this.initCareProjectList();
          } else {
            this.$message({
              type: "error",
              message: res.data.msg,
              duration: 1200
            })
          }
        });
      }).catch(() => {
        this.$message({
          type: "info",
          message: "取消成功"
        })
      })
    },
    //类型添加
    openAddCaretype(){
      this.addtypeDialogVisible=true;
      this.aadTypeForm={};
    },
    addType(){
      this.$refs.addTypeFormRef.validate((valid)=>{
        if(!valid){return;}
        this.$axios.post("/careType/addtype",this.aadTypeForm).then((res)=>{
          if(res.data.code==200){
            this.$message({
              type: "success",
              message: res.data.msg,
              duration: 1000
            })
            this.initCaretypeList();
          }else {
            this.$message({
              type: "error",
              message: res.data.msg,
              duration: 1000
            })
          }
          this.addtypeDialogVisible=false;
        });
      })
    },
    closeAddTypeForm(){
      this.addtypeDialogVisible=false;
    },
    initCaretypeList(){
        this.$axios.get("/careType/alltype").then((res) => {
          if (res.data.code == 200) {
            this.caretypeList = res.data.data;
          } else {
            this.$message({
              message: res.data.msg,
              type: 'error',
              duration: 1000
            });
          }
        })
    },

    /*================================================================*/
    //打开服务项目-添加对话框
    openAddProjectDialog(){
      this.addProjectDialogVisible=true;
      this.aadProjectForm={};
    },
    closeAddProjectForm(){
      this.addProjectDialogVisible=false;
    },
    addProject(){
      this.$refs.addProjectFormRef.validate((valid)=>{
        if(!valid){return;}
        this.$axios.post("/careproject/add",this.aadProjectForm).then((res)=>{
          if(res.data.code==200){
            this.$message({
              type: "success",
              message: res.data.msg,
              duration: 1000
            })
            this.initCareProjectList();
          }else {
            this.$message({
              type: "error",
              message: res.data.msg,
              duration: 1000
            })
          }
          this.addProjectDialogVisible=false;
        });
      })
    },
  //打开修改项目对话框
    openEditProject(careprojectVo){
      this.editProjectDialogVisible=true;
      this.editProjectForm=careprojectVo;
    },
    closeEditProjectForm(){
      this.editProjectDialogVisible=false;
      this.$refs.editProjectFormRef.resetFields();
    },
    editProject(){
      this.$refs.editProjectFormRef.validate((valid)=>{
        if(!valid){return;}
        this.$axios.post("/careproject/modify",this.editProjectForm).then((res)=>{
          if(res.data.code==200){
            this.$message({
              type: "success",
              message: res.data.msg,
              duration: 1000
            })
            this.initCareProjectList();
          }else {
            this.$message({
              type: "error",
              message: res.data.msg,
              duration: 1000
            })
          }
          this.editProjectDialogVisible=false;
          this.$refs.editProjectFormRef.resetFields();
        });
      })
    },
    //删除项目
    removeProject(projectId){
      this.$confirm("你确定要删除吗？将终止此服务项目及相关护理级别的使用", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let url = "/careproject/remove/" + projectId;
        this.$axios.get(url).then((res) => {
          if (res.data.code == 200) {
            this.$message({
              type: "success",
              message: res.data.msg,
              duration: 1000
            })
            this.initCareProjectList();
          } else {
            this.$message({
              type: "error",
              message: res.data.msg,
              duration: 1200
            })
          }
        });
      }).catch(() => {
        this.$message({
          type: "info",
          message: "取消成功"
        })
      })
    },
    searchAllProject(){
      this.caretypeId=0;
      this.pname='';
      this.pageNum=1;
      this.initCareProjectList();
    },

    handleSizeChange(newSize) {
      this.pageNum = 1;
      this.pageSize = newSize;
      this.initCareProjectList();
    },
    handleCurrentChange(newPage) {
      this.pageNum = newPage;
      this.initCareProjectList();
    },
    search() {
      this.pageNum = 1;
      this.initCareProjectList();
    },

    initCareProjectList(){
      this.$axios.get("/careproject/searchList", {
        params: {
          now: this.pageNum,
          size: this.pageSize,
          caretypeId: this.caretypeId,
          pname: this.pname,
        }
      }).then((res) => {
        if (res.data.code == 200) {
          this.CareProjectList = res.data.data.list;
          this.total = res.data.data.total;
          this.pageNum = res.data.data.pageNum;
          this.pageSize = res.data.data.pageSize;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },
    //表格属性（调样式）
    tableRowClassName(row,rowindex){

    },
  },
  created() {
    this.initCaretypeList();
    this.initCareProjectList();
  }
}
</script>

<style scoped>
  .left {
    background-color: white;
    width: 30%;
    float: left;
    margin-left: 3px;
    height: 800px;
  }
  .right {
    /*background-color: orange;*/
    width: 68%;
    float: left;
    height: 800px;
    margin-left: 11px;
  }
</style>
